<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta content="5VRi8quRR2+lc7OJ4RZctBHC3NVA2IXW+jTa8HJOvnA=" name="csrf-token">
	<title>聊天消息</title>
	<link href="/css/animate.min.css?v=20210831" rel="stylesheet">
	<link href="/css/style.min.css?v=20250731" rel="stylesheet">
	<link href="/ruoyi/css/ry-ui.css?v=4.8.1" rel="stylesheet">
    <link rel="stylesheet" href="/css/all.min.css"/>
    <link rel="stylesheet" href="/css/wechat-chat.css">
</head>
<body>
    <div class="container">
        <!-- 功能区 -->
        <div class="sidebar">
			<div class="sidebar-item ">
                <img th:src="(${#strings.isEmpty(user.avatar)}) ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="this.src='img/profile.jpg'" class="img-circle" alt="User Image">
			</div>
			<div class="sidebar-item active" data-tab="chat"><i class="fa-solid fa-comment"></i></div>
            <div class="sidebar-item" data-tab="users"><i class="fa-solid fa-user-group"></i></div>
            <div class="sidebar-item" data-tab="files"><i class="fa-solid fa-folder"></i></div>
            <div class="sidebar-item" data-tab="settings"><i class="fa-solid fa-gear"></i></div>
        </div>
        
        <!-- 会话列表 -->
        <div class="chat-list">
            <!-- 聊天列表 -->
            <div class="tab-content chat-tab active" id="chat-tab">
                <div class="chat-list-header">
                    <div class="search-box">
                        <i class="fa-solid fa-magnifying-glass" style="color: #999; margin-right: 5px;"></i>
                        <input type="text" placeholder="搜索" id="search-input">
                        <div class="search-results" id="search-results" style="display: none;">
                            <div class="search-results-header">
                                <span>搜索结果</span>
                                <button onclick="closeSearchResults()">×</button>
                            </div>
                            <div class="search-results-content" id="search-results-content">
                                <!-- 搜索结果会动态填充到这里 -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chat-list-content" id="chat-list-content">
                </div>
            </div>
            
            <!-- 用户列表 -->
            <div class="tab-content user-tab" id="users-tab" style="display: none;">
                <div class="user-list-header">
                    <div class="search-box">
                        <i class="fa-solid fa-magnifying-glass" style="color: #999; margin-right: 5px;"></i>
                        <input type="text" placeholder="搜索用户" id="user-search-input">
                    </div>
                </div>
                <div class="user-list-content" id="user-list-content">
                    <!-- 用户列表会动态填充到这里 -->
                    <div class="chat-item" th:attr="data-chat=${user.userId}" th:each="user : ${userList}">
                        <div class="avatar">[[${#strings.substring(user.userName, 0, 1)}]]</div>
                        <div class="chat-info">
                            <div class="chat-name">[[${user.userName}]]</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 文件列表 -->
            <div class="tab-content file-tab" id="file-tab" style="display: none;">
                <div class="file-list-content">
                    <div class="no-content">
                        <i class="fa-solid fa-folder" style="font-size: 48px; color: #ccc; margin-bottom: 16px;"></i>
                        <p>文件管理功能待实现</p>
                    </div>
                </div>
            </div>
            
            <!-- 设置页面 -->
            <div class="tab-content settings-tab" id="settings-tab" style="display: none;">
                <div class="settings-content">
                    <div class="no-content">
                        <i class="fa-solid fa-gear" style="font-size: 48px; color: #ccc; margin-bottom: 16px;"></i>
                        <p>设置功能待实现</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 聊天区 -->
        <div class="chat-area" id="chat-area" style="display: none;">
            <div class="chat-header">
                <div class="chat-title" id="chat-title">UserName</div>
                <div class="chat-actions" style="display:none;">
                    <i class="fa-solid fa-phone action-btn"></i>
                    <i class="fa-solid fa-video action-btn"></i>
                    <i class="fa-solid fa-ellipsis-h action-btn"></i>
                </div>
            </div>
            <div class="chat-messages" id="chat-messages">
				<!--消息对话-->
            </div>
            <div class="chat-input">
                <div class="chat-input-resize-handle" id="chat-input-resize-handle"></div>
                <div class="input-tools">
                    <i class="fa-regular fa-face-smile tool-btn"></i>
                    <i class="fa-solid fa-paperclip tool-btn"></i>
                    <i class="fa-solid fa-image tool-btn"></i>
                    <i class="fa-solid fa-folder-open tool-btn"></i>
                </div>
                <div class="input-box">
                    <textarea placeholder="输入消息..." id="message-input"></textarea>
                    <button class="send-btn" id="send-btn">发送</button>
                </div>
            </div>
        </div>
        
        <!-- 默认显示区域 - 当没有选择聊天时显示 -->
        <div class="default-area" id="default-area">
            <div class="welcome-message">
                <i class="fa-solid fa-comments" style="font-size: 96px; color: #ddd;"></i>
            </div>
        </div>
    </div>

	<th:block th:insert="~{include :: footer}" />
    <script src="/js/sockjs/sockjs.min.js"></script>
    <script src="/js/sockjs/stomp.min.js"></script>
	<script th:src="@{/js/wechat-chat.js}"></script>
    <script th:inline="javascript">
    </script>
</body>
</html>